<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
    <School ref="sch" /> <!-- 为组件添加 ref 属性-->>
  </div>
</template>

<script>
// 引入 School 组件
import School from "./components/School.vue";

export default {
  // 组件名称
  name: "Vue2App",

  // 注册子组件
  components: {
    School,
  },

  data(){
    return{
      msg:"Hello Vue2App"
    }
  },

  methods: {
    showDOM(){
      // 点击按钮获取 h1 元素 this：App组件的实例对象
      console.log(this.$refs.title); // 真实 DOM 元素
      console.log(this.$refs.btn);  // 真实 DOM 元素
      console.log(this.$refs.sch); // School 组件实例对象(vc)
      console.log(this.$refs);
    }
  },

};
</script>
